<template>
  <a-modal
    :title="title"
    :width="800"
    :visible="visible"
    :okButtonProps="{ props: {disabled: disableSubmit} }"
    :confirmLoading="confirmLoading"
    @ok="handleOk"
    @cancel="handleCancel"
    cancelText="关闭">
    <a-spin :spinning="confirmLoading">
      <a-form :form="form">


        <a-row :gutter="24">

          <a-col :md="6" :sm="24">
            <a-form-item
              label="报考学校"
              hasFeedback>
              <!--<a-input placeholder="请输入报考学校" v-decorator="['toSchool', {}]" />-->
              <a-select @change="schoolChange" :options="optionsSchool" placeholder="请选择校区"
                        v-decorator="['toSchool', {}]">
              </a-select>
            </a-form-item>
          </a-col>

          <a-col :md="6" :sm="24">
            <a-form-item
              label="层次"
              hasFeedback>
              <!--<a-input placeholder="请输入层次" v-decorator="['level', {}]" />-->
              <j-dict-select-tag v-decorator="['level', {}]" :triggerChange="true" placeholder="请输入层次"
                                 dictCode="xc_level"/>
            </a-form-item>
          </a-col>


          <a-col :md="6" :sm="24">
            <a-form-item
              label="专业"
              hasFeedback>
              <a-input placeholder="请输入专业" v-decorator="['major', {}]"/>
            </a-form-item>
          </a-col>

          <a-col :md="6" :sm="24">

            <a-form-item
              label="学习形式"
              hasFeedback>
              <!--<a-input placeholder="请输入学习形式" v-decorator="['learnType', {}]" />-->
              <j-dict-select-tag v-decorator="['learnType', {}]" :triggerChange="true" placeholder="请选择学习形式"
                                 dictCode="xc_learn_type"/>
            </a-form-item>
          </a-col>


          <a-col :md="6" :sm="24">
            <a-form-item
              label="批次">
              <!--<a-input placeholder="请输入批次" v-decorator="['batch', {}]" />-->
              <j-dict-select-tag style="width: 181px" v-decorator="['batch', {}]" :triggerChange="true"
                                 placeholder="请输入批次"
                                 dictCode="xc_batch"/>
            </a-form-item>
          </a-col>

          <a-col :md="6" :sm="24">
            <a-form-item
              label="学费"
              hasFeedback>
              <a-input type="number" placeholder="请输入学费" v-decorator="['schooling', {}]"/>
            </a-form-item>
          </a-col>
        </a-row>

        <!--<a-col :md="6" :sm="24">-->

        <!--<a-form-item-->
        <!--label="所属平台"-->
        <!--hasFeedback>-->
        <!--&lt;!&ndash;<a-input placeholder="请输入所属平台" v-decorator="['belong', {}]" />&ndash;&gt;-->
        <!--<j-dict-select-tag style="width: 181px" v-decorator="['belong', {}]" :triggerChange="true" placeholder="请输入批次"-->
        <!--dictCode="xc_platform"/>-->
        <!--</a-form-item>-->

        <!--</a-col>-->


        <!--<a-col :md="6" :sm="24">-->
        <!--<a-form-item-->
        <!--label="联系地址"-->
        <!--hasFeedback>-->
        <!--<a-input placeholder="请输入联系地址" v-decorator="['homeAddress', {}]" />-->
        <!--</a-form-item>-->
        <!--</a-col>-->

        <!--<a-col :md="6" :sm="24">-->

        <!--<a-form-item-->
        <!--label="工作单位"-->
        <!--hasFeedback>-->
        <!--<a-input placeholder="请输入工作单位" v-decorator="['workAddress', {}]" />-->
        <!--</a-form-item>-->

        <!--</a-col>-->


        <!--<a-col :md="6" :sm="24">-->
        <!--<a-form-item-->
        <!--label="民族"-->
        <!--hasFeedback>-->
        <!--<a-input placeholder="请输入民族" v-decorator="['nation', {}]" />-->
        <!--</a-form-item>-->
        <!--</a-col>-->

        <a-row :gutter="24">
          <a-col :md="6" :sm="24">

            <a-form-item
              label="身份证正面"
              hasFeedback>
              <!--<a-input placeholder="请输入身份证正面" v-decorator="['cardIdTop', {}]" />-->


              <div
                   style="width: 100%;height: 100%;position: relative;padding: 8px;border: 1px solid #d9d9d9;border-radius: 4px;">
                <img style="width: 100%;height:100px" :src="imageSrc+'/'+cardIdTop" :preview="index">
              </div>
              <div >

                <j-upload v-if="!isDetail" :value="imageValue" @change="handImage($event,'cardIdTop')"></j-upload>
              </div>
            </a-form-item>
          </a-col>

          <a-col :md="6" :sm="24">
            <a-form-item
              label="身份证反面"
              hasFeedback>
              <div
                style="width: 100%;height: 100%;position: relative;padding: 8px;border: 1px solid #d9d9d9;border-radius: 4px;">
                <img style="width: 100%;height:100px" :src="imageSrc+'/'+cardIdBottom" :preview="index">
              </div>
              <!--<a-input placeholder="请输入身份证反面" v-decorator="['cardIdBottom', {}]" />-->
              <j-upload v-if="!isDetail" :value="imageValue" @change="handImage($event,'cardIdBottom')"></j-upload>
            </a-form-item>
          </a-col>

          <a-col :md="6" :sm="24">
            <a-form-item
              label="证件照"
              hasFeedback>
              <!--<a-input placeholder="请输入证件照" v-decorator="['certImage', {}]" />-->
              <div
                style="width: 100%;height: 100%;position: relative;padding: 8px;border: 1px solid #d9d9d9;border-radius: 4px;">
                <img style="width: 100%;height:100px" :src="imageSrc+'/'+certImage" :preview="index">
              </div>
              <j-upload v-if="!isDetail" :value="imageValue" @change="handImage($event,'certImage')"></j-upload>
            </a-form-item>
          </a-col>


          <a-col :md="6" :sm="24">
            <a-form-item
              label="前置学历毕业证"
              hasFeedback>
              <!--<a-input placeholder="请输入前置学历毕业证" v-decorator="['eduImage', {}]" />-->
              <div
                style="width: 100%;height: 100%;position: relative;padding: 8px;border: 1px solid #d9d9d9;border-radius: 4px;">
                <img style="width: 100%;height:100px" :src="imageSrc+'/'+eduImage" :preview="index">
              </div>
              <j-upload v-if="!isDetail" :value="imageValue" @change="handImage($event,'eduImage')"></j-upload>
            </a-form-item>
          </a-col>

          <a-col :md="6" :sm="24">
            <a-form-item
              label="学信网认证"
              hasFeedback>
              <!--<a-input placeholder="请输入学信网认证" v-decorator="['chsiImage', {}]" />-->
              <div
                style="width: 100%;height: 100%;position: relative;padding: 8px;border: 1px solid #d9d9d9;border-radius: 4px;">
                <img style="width: 100%;height:100px" :src="imageSrc+'/'+chsiImage" :preview="index">
              </div>
              <j-upload v-if="!isDetail" :value="imageValue" @change="handImage($event,'chsiImage')"></j-upload>
            </a-form-item>
          </a-col>

          <a-col :md="6" :sm="24">
            <a-form-item
              label="其他证书"
              hasFeedback>
              <!--<a-input placeholder="请输入异地证明" v-decorator="['otherPlaceImage', {}]" />-->
              <div
                style="width: 100%;height: 100%;position: relative;padding: 8px;border: 1px solid #d9d9d9;border-radius: 4px;">
                <img style="width: 100%;height:100px" :src="imageSrc+'/'+otherPlaceImage" :preview="index">
              </div>
              <j-upload v-if="!isDetail" :value="imageValue" @change="handImage($event,'otherPlaceImage')"></j-upload>
            </a-form-item>

          </a-col>

          <a-col :md="6" :sm="24">
            <a-form-item
              label="异地证明"
              hasFeedback>
              <!--<a-input placeholder="请输入其他证书" v-decorator="['otherCertImage', {}]" />-->
              <div
                style="width: 100%;height: 100%;position: relative;padding: 8px;border: 1px solid #d9d9d9;border-radius: 4px;">
                <img style="width: 100%;height:100px" :src="imageSrc+'/'+otherCertImage" :preview="index">
              </div>
              <j-upload v-if="!isDetail" :value="imageValue" @change="handImage($event,'otherCertImage')"></j-upload>
            </a-form-item>
          </a-col>

          <a-col :md="24" :sm="24">
            <a-form-item
              label="备注"
              hasFeedback>
              <a-textarea readonly v-if="isDetail" rows="5" placeholder="请输入备注" v-decorator="['remark', {}]"/>
              <a-textarea v-if="!isDetail" rows="5" placeholder="请输入备注" v-decorator="['remark', {}]"/>
            </a-form-item>
          </a-col>

        </a-row>


        <!--<a-form-item-->
        <!--:labelCol="labelCol"-->
        <!--:wrapperCol="wrapperCol"-->
        <!--label="创建人姓名"-->
        <!--hasFeedback>-->
        <!--<a-input placeholder="请输入创建人姓名" v-decorator="['createName', {}]" />-->
        <!--</a-form-item>-->

        <!--<a-form-item-->
        <!--:labelCol="labelCol"-->
        <!--:wrapperCol="wrapperCol"-->
        <!--label="更新人姓名"-->
        <!--hasFeedback>-->
        <!--<a-input placeholder="请输入更新人姓名" v-decorator="['updateName', {}]" />-->
        <!--</a-form-item>-->

        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="所属学生"
          :hidden="hiding"
          style="display: none"
          hasFeedback>
          <a-input placeholder="请输入所属学生" v-decorator="['studentId', {'initialValue':this.mainId}]"/>
        </a-form-item>
      </a-form>
    </a-spin>
  </a-modal>
</template>

<script>
  import { httpAction, getAction } from '@/api/manage'
  import pick from 'lodash.pick'
  import moment from 'moment'
  import JDate from '@/components/jeecg/JDate'
  import JDictSelectTag from '@/components/dict/JDictSelectTag'
  import JUpload from '@/components/jeecg/JUpload'
  import ATextarea from 'ant-design-vue/es/input/TextArea'
  import ACol from 'ant-design-vue/es/grid/Col'

  export default {
    components: {
      ACol,
      ATextarea,
      JDate,
      JDictSelectTag,
      JUpload
    },
    name: 'SchoolChooseModal',
    data() {
      return {
        optionsSchool: [],
        imageValue: '',
        showUploadList: true,
        title: '操作',
        visible: false,
        model: {},
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 }
        },
        moment,
        format: 'YYYY-MM-DD HH:mm:ss',
        disableSubmit: false,
        mainId: '',
        hiding: false,
        confirmLoading: false,
        form: this.$form.createForm(this),
        validatorRules: {},
        url: {
          add: '/student/student/addSchoolChoose',
          edit: '/student/student/editSchoolChoose'
        },

        fileList: [],
        // 身份证正面
        cardIdTop: '',
        // 身份证反面
        cardIdBottom: '',
        certImage:'',
        eduImage:'',
        chsiImage:'',
        otherPlaceImage:'',
        otherCertImage:'',

        // 所属平台
        belong: '',
        // 是否是查看
        isDetail: false,
        index:0
      }
    },
    computed: {
      imageSrc: function(r) {
        return `${window._CONFIG['imgDomainURL']}`
      }
    },
    created() {
      // this.initOptionsSchool()
    },
    methods: {
      // 选择学校
      schoolChange(value, text, options) {
        console.log('选择学校value------->', value)

        let belongArr = this.optionsSchool.filter(r => r.value === value)

        if (belongArr.length !== 0) {
          console.log('选择学校options------->', belongArr)
          this.belong = belongArr[0].belong
          console.log('选择学校belong------->', this.belong)

        }

      },

      // 加载报考学校
      initOptionsSchool() {
        var url = '/school/school/listAll'
        this.optionsSchool=[]
        getAction(url).then((res) => {
          if (res.success) {
            var result = res.result
            result.forEach(r => {
              this.optionsSchool.push({
                value: r.schoolName,
                label: r.schoolName,
                belong: r.belong
              })
            })
          }
        })
      },

      // 上传图片
      handImage(path, from) {
        console.log('图片上传----》', path)
        console.log('来源----》', from)

        if (from === 'cardIdTop') {
          this.cardIdTop = path
        } else if (from === 'cardIdBottom') {
          this.cardIdBottom = path

        } else if (from === 'certImage') {
          this.certImage = path

        } else if (from === 'eduImage') {
          this.eduImage = path

        } else if (from === 'chsiImage') {
          this.chsiImage = path
        } else if (from === 'otherPlaceImage') {
          this.otherPlaceImage = path
        } else if (from === 'otherCertImage') {
          this.otherCertImage = path
        }

      },
      add(mainId) {
        this.isDetail = false
        if (mainId) {
          this.edit({ mainId }, '')
        } else {
          this.$message.warning('请选择一个学生')
        }
      },
      detail(record) {

        this.edit(record, 'd')

      },
      edit(record, v) {
        try{
          let mainId=record.mainId
        }catch (e) {
          this.$message.warning("暂无院校信息！")
        }


        // this.initOptionsSchool()
        if (v == 'e') {
          this.isDetail = false
          this.hiding = false
          this.disableSubmit = false
        } else if (v == 'd') {
          this.isDetail = true
          this.hiding = false
          this.disableSubmit = true
        } else {
          this.hiding = true
          this.disableSubmit = false
        }
        this.form.resetFields()
        this.mainId = record.mainId
        this.model = Object.assign({}, record)
        this.visible = true
        this.$nextTick(() => {

          this.cardIdTop = this.model.cardIdTop
          this.cardIdBottom = this.model.cardIdBottom
          this.certImage = this.model.certImage
          this.eduImage = this.model.eduImage
          this.chsiImage = this.model.chsiImage
          this.otherPlaceImage = this.model.otherPlaceImage
          this.otherCertImage = this.model.otherCertImage

          this.form.setFieldsValue({ toSchool: this.model.toSchool })
          this.form.setFieldsValue({ belong: this.belong })

          // this.form.setFieldsValue(pick(this.model, 'level', 'batch','major', 'learnType', 'homeAddress', 'workAddress', 'nation', 'cardIdTop', 'cardIdBottom', 'certImage', 'eduImage', 'chsiImage', 'otherPlaceImage', 'otherCertImage', 'belong', 'schooling', 'remark', 'createName', 'updateName', 'studentId', ))
          this.form.setFieldsValue(pick(this.model, 'level', 'batch', 'major', 'learnType', 'cardIdTop', 'cardIdBottom', 'certImage', 'eduImage', 'chsiImage', 'otherPlaceImage', 'otherCertImage', 'schooling', 'remark', 'createName', 'updateName', 'studentId'))
          // 时间格式化
        })
      },
      close() {
        this.$emit('close')
        this.visible = false
      },
      handleOk() {
        // 身份证正面照
        this.model.cardIdTop = this.cardIdTop
        // 身份证反面照
        this.model.cardIdBottom = this.cardIdBottom
        this.model.certImage = this.certImage
        this.model.eduImage = this.eduImage
        this.model.chsiImage = this.chsiImage
        this.model.otherPlaceImage = this.otherPlaceImage
        this.model.otherCertImage = this.otherCertImage

        // 所属平台
        this.model.belong = this.belong




        this.imageValue = ''
        const that = this

        // 触发表单验证
        this.form.validateFields((err, values) => {
          if (!err) {
            that.confirmLoading = true
            let httpurl = ''
            let method = ''
            if (!this.model.id) {
              httpurl += this.url.add
              method = 'post'
            } else {
              httpurl += this.url.edit
              method = 'put'
            }
            let formData = Object.assign(this.model, values)
            //时间格式化
            httpAction(httpurl, formData, method).then((res) => {
              if (res.success) {
                that.$message.success(res.message)
                that.$emit('ok')
              } else {
                that.$message.warning(res.message)
              }
            }).finally(() => {
              that.imageValue = 'clear'
              that.confirmLoading = false
              that.close()

            })
          }
        })
      },
      handleCancel() {
        this.close()
      }
    }
  }
</script>

<style scoped>

</style>
